:root{
    --bg:#000103;
    --panel:rgba(8,11,19,0.72);
    --panel-solid:#090c14;
    --hairline:rgba(180,200,255,0.13);
    --gold:#e8b463;
    --cyan:#6fd8d2;
    --dwarf:#c9a7e8;
    --text:#eef1f8;
    --text-dim:#8d96b0;
    --text-dimmer:#565e75;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;width:100%;height:100%;background:var(--bg);overflow:hidden;font-family:'Inter',sans-serif;color:var(--text);overscroll-behavior:none;}
  #canvas-wrap{position:fixed;inset:0;}
  canvas{display:block;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}
  #vignette{position:fixed;inset:0;pointer-events:none;z-index:5;background:radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.5) 100%);}

  /* ---------- Loading: rocket launch ---------- */
  #loader{position:fixed;inset:0;background:#000103;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .8s ease;overflow:hidden;}
  #loader.hide{opacity:0;pointer-events:none;}
  #loader-stars{position:absolute;inset:0;width:100%;height:100%;}
  .rocket-wrap{position:relative;width:64px;height:110px;}
  .rocket{position:absolute;left:50%;bottom:0;width:34px;height:78px;margin-left:-17px;animation:rocketBob 1.1s ease-in-out infinite;transform-origin:50% 85%;}
  @keyframes rocketBob{
    0%{transform:translateY(0) rotate(-1.4deg) scale(1);}
    25%{transform:translateY(-4px) rotate(0.8deg) scale(1.012);}
    50%{transform:translateY(-9px) rotate(1.6deg) scale(1.02);}
    75%{transform:translateY(-4px) rotate(-0.4deg) scale(1.012);}
    100%{transform:translateY(0) rotate(-1.4deg) scale(1);}
  }
  .rocket svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 10px rgba(232,180,99,0.35));}
  .flame{position:absolute;left:50%;bottom:-16px;width:14px;height:26px;margin-left:-7px;border-radius:0 0 50% 50%;
    background:linear-gradient(to bottom, #fff6d8, var(--gold) 45%, #e0642c 80%, transparent);
    animation:flameFlicker .18s ease-in-out infinite alternate;
    filter:blur(0.5px);
  }
  @keyframes flameFlicker{from{transform:scaleY(1) scaleX(1);opacity:.95;}to{transform:scaleY(1.25) scaleX(0.82);opacity:.75;}}
  #loader h1{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:12.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--text-dim);margin:0;position:relative;z-index:1;}
  #loader .loader-bar{width:140px;height:2px;border-radius:2px;background:rgba(255,255,255,0.1);overflow:hidden;position:relative;z-index:1;}
  #loader .loader-bar i{display:block;height:100%;width:40%;background:var(--gold);border-radius:2px;animation:barSlide 1.2s ease-in-out infinite;}
  @keyframes barSlide{0%{transform:translateX(-100%);}100%{transform:translateX(350%);}}

  /* ---------- Top bar ---------- */
  #topbar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:flex-start;justify-content:space-between;padding:16px 16px 0;pointer-events:none;}
  #brand{pointer-events:auto;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;letter-spacing:0.02em;display:flex;flex-direction:column;line-height:1.3;}
  #brand span{font-family:'Inter',sans-serif;font-weight:500;font-size:9.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-dimmer);}
  #controls-top{pointer-events:auto;display:flex;gap:7px;}
  .icon-btn{width:38px;height:38px;border-radius:10px;background:var(--panel);border:1px solid var(--hairline);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-dim);transition:all .2s ease;flex:0 0 auto;position:relative;}
  .icon-btn:active{transform:scale(0.92);}
  .icon-btn.active{color:var(--gold);border-color:rgba(232,180,99,0.4);background:rgba(232,180,99,0.09);}
  .icon-btn svg{width:16px;height:16px;}
  .icon-btn .pulse-dot{position:absolute;top:-3px;right:-3px;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 6px 1px var(--cyan);display:none;}
  .icon-btn.active .pulse-dot{display:block;animation:pulseDot 1.4s ease-in-out infinite;}
  @keyframes pulseDot{0%,100%{opacity:1;}50%{opacity:.35;}}

  /* ---------- Bottom transport ---------- */
  #transport{position:fixed;bottom:0;left:0;right:0;z-index:20;padding:0 12px calc(14px + env(safe-area-inset-bottom));pointer-events:none;background:linear-gradient(to top, rgba(0,1,3,0.9), rgba(0,1,3,0.5) 60%, transparent);padding-top:34px;}
  #planet-strip{pointer-events:auto;display:flex;gap:7px;overflow-x:auto;padding:2px 2px 4px 2px;scrollbar-width:none;}
  #planet-strip::-webkit-scrollbar{display:none;}
  .p-chip{flex:0 0 auto;padding:8px 15px;border-radius:20px;background:var(--panel);border:1px solid var(--hairline);backdrop-filter:blur(16px);font-size:12px;font-weight:500;color:var(--text-dim);cursor:pointer;white-space:nowrap;transition:all .2s ease;touch-action:manipulation;}
  .p-chip:active{transform:scale(0.95);}
  .p-chip.active{color:#040302;background:var(--gold);border-color:var(--gold);font-weight:600;}
  .p-chip.special{color:var(--cyan);border-color:rgba(111,216,210,0.35);}
  .p-chip.special.active{color:#04302e;background:var(--cyan);border-color:var(--cyan);}
  .p-chip.dwarf{color:var(--dwarf);border-color:rgba(201,167,232,0.35);}
  .p-chip.dwarf.active{color:#241832;background:var(--dwarf);border-color:var(--dwarf);}

  /* ---------- Info panel (desktop: right rail) ---------- */
  #info-panel{position:fixed;top:0;right:0;height:100%;width:360px;max-width:88vw;background:var(--panel-solid);border-left:1px solid var(--hairline);z-index:30;transform:translateX(100%);transition:transform .5s cubic-bezier(.2,.9,.25,1);overflow-y:auto;padding:0 0 calc(24px + env(safe-area-inset-bottom));}
  #info-panel.open{transform:translateX(0);}
  #info-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:8px;background:rgba(0,0,0,0.3);border:1px solid var(--hairline);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;touch-action:manipulation;}
  #info-drag{display:none;}

  #preview-stage{position:relative;width:100%;height:190px;overflow:hidden;background:radial-gradient(ellipse at 50% 30%, var(--sw-glow-soft, rgba(120,140,200,0.18)), transparent 70%);}
  #preview-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .5s ease;}
  #preview-canvas.ready{opacity:1;}
  #preview-fade{position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(to bottom, transparent, var(--panel-solid));}
  #info-photo-badge{position:absolute;right:12px;bottom:12px;width:68px;height:68px;border-radius:11px;overflow:hidden;border:2px solid rgba(255,255,255,0.28);box-shadow:0 6px 18px rgba(0,0,0,0.55);z-index:3;display:none;background:#000;}
  #info-photo-badge img{width:100%;height:100%;object-fit:cover;display:block;}
  #info-photo-badge .cap{position:absolute;bottom:0;left:0;right:0;font-size:7.5px;letter-spacing:0.04em;text-transform:uppercase;text-align:center;background:rgba(0,0,0,0.6);color:#e8dcc4;padding:2px 0;font-weight:600;}

  #info-body{padding:18px 22px 0;}
  #info-panel h2{font-family:'Space Grotesk',sans-serif;font-size:26px;margin:0 0 2px;font-weight:600;opacity:0;transform:translateY(6px);animation:infoRise .5s ease .05s forwards;}
  #info-panel .subtitle{font-size:11.5px;color:var(--gold);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:15px;font-weight:500;opacity:0;transform:translateY(6px);animation:infoRise .5s ease .1s forwards;}
  #info-panel .desc{font-size:13.5px;line-height:1.65;color:var(--text-dim);margin-bottom:18px;opacity:0;transform:translateY(6px);animation:infoRise .5s ease .15s forwards;}
  @keyframes infoRise{to{opacity:1;transform:translateY(0);}}
  .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin-bottom:6px;}
  .stat{border-top:1px solid var(--hairline);padding-top:8px;opacity:0;transform:translateY(8px);animation:infoRise .45s ease forwards;}
  .stat .k{font-size:9.5px;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-dimmer);margin-bottom:4px;}
  .stat .v{font-size:13.5px;font-weight:600;font-family:'Space Grotesk',sans-serif;}
  #fact-box{margin-top:18px;padding:12px 14px;border-radius:12px;background:rgba(232,180,99,0.06);border:1px solid rgba(232,180,99,0.2);font-size:12.5px;line-height:1.55;color:#e8dcc4;opacity:0;transform:translateY(8px);animation:infoRise .45s ease .3s forwards;}
  #fact-box b{color:var(--gold);}
  #moon-row{margin-top:20px;opacity:0;transform:translateY(8px);animation:infoRise .45s ease .35s forwards;}
  #moon-row .k{font-size:9.5px;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-dimmer);margin-bottom:8px;}
  .moon-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px 6px 6px;border-radius:16px;background:rgba(255,255,255,0.04);border:1px solid var(--hairline);font-size:11.5px;color:var(--text-dim);margin:0 6px 6px 0;cursor:pointer;transition:background .15s ease;touch-action:manipulation;}
  .moon-chip:active{background:rgba(255,255,255,0.1);}
  .moon-chip .dot{width:16px;height:16px;border-radius:50%;background:#aab;}

  #scale-note{position:fixed;left:16px;top:64px;z-index:15;font-size:10.5px;color:var(--text-dimmer);letter-spacing:0.02em;background:rgba(0,1,3,0.4);padding:4px 10px;border-radius:6px;}

  #search-overlay{position:fixed;top:64px;right:16px;width:340px;max-width:calc(100vw - 32px);max-height:70vh;background:var(--panel-solid);border:1px solid var(--hairline);border-radius:16px;z-index:40;box-shadow:0 20px 50px rgba(0,0,0,0.55);display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(-10px) scale(0.98);pointer-events:none;transition:opacity .2s ease, transform .2s ease;}
  #search-overlay.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
  #search-box{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--hairline);color:var(--text-dimmer);flex:0 0 auto;}
  #search-input{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:'Inter',sans-serif;font-size:14px;}
  #search-input::placeholder{color:var(--text-dimmer);}
  #search-close{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);cursor:pointer;flex:0 0 auto;touch-action:manipulation;}
  #search-close:active{background:rgba(255,255,255,0.08);}
  #search-filters{display:flex;gap:6px;overflow-x:auto;padding:10px 12px;border-bottom:1px solid var(--hairline);scrollbar-width:none;flex:0 0 auto;}
  #search-filters::-webkit-scrollbar{display:none;}
  .filter-chip{flex:0 0 auto;padding:6px 12px;border-radius:14px;background:rgba(255,255,255,0.04);border:1px solid var(--hairline);font-size:11px;font-weight:500;color:var(--text-dim);cursor:pointer;white-space:nowrap;touch-action:manipulation;}
  .filter-chip.active{background:var(--gold);color:#040302;border-color:var(--gold);font-weight:600;}
  #search-results{overflow-y:auto;flex:1 1 auto;padding:6px;}
  .search-result{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 10px;border-radius:10px;cursor:pointer;touch-action:manipulation;}
  .search-result:active{background:rgba(255,255,255,0.08);}
  .search-result .sr-name{font-size:13.5px;font-weight:500;color:var(--text);}
  .search-result .sr-type{font-size:10.5px;color:var(--text-dimmer);text-transform:uppercase;letter-spacing:0.05em;flex:0 0 auto;}
  .search-empty{padding:24px 12px;text-align:center;color:var(--text-dimmer);font-size:12.5px;}
  @media (max-width:780px){
    #search-overlay{left:12px;right:12px;width:auto;top:60px;max-height:60vh;}
  }

  #hover-tip{position:fixed;pointer-events:none;z-index:25;background:rgba(9,13,22,0.92);border:1px solid var(--hairline);padding:5px 10px;border-radius:6px;font-size:11.5px;font-weight:500;color:var(--text);opacity:0;transform:translate(-50%,-140%);transition:opacity .15s ease;white-space:nowrap;}

  @media (max-width:780px){
    #brand span{display:none;}
    #brand{font-size:14px;}
    .icon-btn{width:36px;height:36px;}
    #scale-note{display:none;}
    #info-panel{
      top:auto; bottom:0; left:0; right:0; width:100%; max-width:100%;
      height:auto; max-height:82vh; border-left:none; border-top:1px solid var(--hairline);
      border-radius:20px 20px 0 0; transform:translateY(100%);
    }
    #info-panel.open{transform:translateY(0);}
    #preview-stage{height:150px; border-radius:20px 20px 0 0;}
    #info-drag{display:block;width:36px;height:4px;border-radius:3px;background:rgba(255,255,255,0.35);margin:10px auto 0;position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:2;}
  }